<!--
 * @Author: 熔岩巨兽 2141826215@qq.com
 * @Date: 2024-08-26 23:14:35
 * @LastEditTime: 2024-09-10 22:38:22
 * @LastEditors: 熔岩巨兽 2141826215@qq.com
 * @FilePath: \vue-vite-project\src\App.vue
 * Copyright (c) 2024 by 熔岩巨兽 2141826215@qq.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router";
import { reactive } from "vue";
let a = 100;
console.log(a);
const navList = reactive([
  {
    name: "props",
    path: "/props",
  },
  {
    name: "custom event",
    path: "/customEvent",
  },
  {
    name: "event bus",
    path: "/eventBus",
  },
  {
    name: "v-modelref$parent",
    path: "/vModel",
  },
  {
    name: "useAttrs",
    path: "/UseAttrRefParent",
  },
  {
    name: "provider-inject",
    path: "/ProVideInject",
  },
  {
    name: "pinia",
    path: "/pinia",
  },
  {
    name: "slot",
    path: "/slot",
  },
]);
</script>
<template>
  <header>
    <img
      alt="Vue logo"
      class="logo"
      src="@/assets/logo.svg"
      width="125"
      height="125"
    />
    <div class="wrapper">
      <h1>各种Vue组件间的通信/传值 <span>非常重要，面试必备</span></h1>
      <strong>演示：</strong>
      <router-link
        active-class="active"
        class="mr-10"
        v-for="(item, index) in navList"
        :key="index"
        :to="item.path"
        >{{ item.name }}</router-link
      >
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
body {
  color: #000;
}
.mr-10 {
  margin-right: 10px;
}
.active {
  color: #27ba5f46;
}
</style>
